<template>

  <div>
    
<!-- 上边的卡片 -->
    <div>
      <el-row :gutter="30">
        <el-col :span="6">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span><h2>XXX万亿</h2></span>
            </div>
            <div>
              <el-container>
                <el-aside width="200px">
                  <h1>资产总额</h1>
                </el-aside>
                <el-main>
                  <h2>
                    环比:x% <i class="el-icon-bottom" style="color:#f56c6c"></i>
                  </h2>
                  <h2>
                    同比:x% <i class="el-icon-top" style="color:#67c23a"></i>
                  </h2>
                </el-main>
              </el-container>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span><h2>XXX万亿</h2></span>
            </div>
            <div>
              <el-container>
                <el-aside width="200px">
                  <h1>负债总额</h1>
                </el-aside>
                <el-main>
                  <h2>
                    环比:x% <i class="el-icon-bottom" style="color:#f56c6c"></i>
                  </h2>
                  <h2>
                    同比:x% <i class="el-icon-top" style="color:#67c23a"></i>
                  </h2>
                </el-main>
              </el-container>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span><h2>XXX万亿</h2></span>
            </div>
            <div>
              <el-container>
                <el-aside width="200px">
                  <h1>所有者权益总额</h1>
                </el-aside>
                <el-main>
                  <h2>
                    环比:x% <i class="el-icon-bottom" style="color:#f56c6c"></i>
                  </h2>
                  <h2>
                    同比:x% <i class="el-icon-top" style="color:#67c23a"></i>
                  </h2>
                </el-main>
              </el-container>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <!-- 横向多组柱状图 -->
    <div id="myChart">
      <div id="main" style="width: 1200px;height:1000px;"></div>
    </div>

    <!-- 每月的数据表格 -->
    <div>
      <div class="month_table">
        <el-table :data="tableData" style="width:1260px">
          <el-table-column prop="category_months" label="类别\月份" width="180">
          </el-table-column>
          <el-table-column prop="January" label="一月" width="90">
          </el-table-column>
          <el-table-column prop="February" label="二月" width="90">
          </el-table-column>
          <el-table-column prop="March" label="三月" width="90">
          </el-table-column>
          <el-table-column prop="April" label="四月" width="90">
          </el-table-column>
          <el-table-column prop="May" label="五月" width="90">
          </el-table-column>
          <el-table-column prop="June" label="六月" width="90">
          </el-table-column>
          <el-table-column prop="July" label="七月" width="90">
          </el-table-column>
          <el-table-column prop="August" label="八月" width="90">
          </el-table-column>
          <el-table-column prop="September" label="九月" width="90">
          </el-table-column>
          <el-table-column prop="October" label="十月" width="90">
          </el-table-column>
          <el-table-column prop="November" label="十一月" width="90">
          </el-table-column>
          <el-table-column prop="December" label="十二月" width="90">
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "myChart",
  methods: {
    drawChart() {
      
        let myChart = this.$echarts.init(document.getElementById('main'));

        let option = {
            title : {
                text: '单位(万亿)',
                
            },
            tooltip : {
                trigger: 'axis'
            },
            legend: {
                data:['所有者权益','负债合计','资产合计']
            },
            calculable : true,
            xAxis : 
                {
                    type : 'value'
                    
                },
            yAxis : 
                {
                    type : 'category',
                    data : [
                          "一月",
                          "二月",
                          "三月",
                          "四月",
                          "五月",
                          "六月",
                          "七月",
                          "八月",
                          "九月",
                          "十月",
                          "十一月",
                          "十二月"
                        ],
                },
            series : [
                {
                    name:'所有者权益',
                    type:'bar',
                    data:[1843.5, 1855.6, 1725.9, 1935.2,1663.5,1899.5,1578.3,1587.5,1953.2,1956.3,1887.3,1856.3],
                    color:'#CC0066',
                    itemStyle:{
                      normal:{
                        label:{
                            show:true,
                            position:'right',
                            textStyle:{
                              color:'black',
                              fonrSize:16
                            }
                        }
                      }
                        
                    }
                    
                },
                {
                    name:'负债合计',
                    type:'bar',
                    data:[1743.5, 1855.6, 1725.9, 1225.2,1663.5,1899.5,1578.3,1757.5,1853.2,1356.3,1887.3,1756.3],
                    color:'#009999',
                    itemStyle:{
                      normal:{
                        label:{
                            show:true,
                            position:'right',
                            textStyle:{
                              color:'black',
                              fonrSize:16
                            }
                        }
                      }
                        
                    }
                    
                },
                {
                    name:'资产合计',
                    type:'bar',
                    data:[1343.5, 1655.6, 1225.9, 1425.2,1763.5,1859.5,1518.3,1727.5,1853.2,1396.3,1187.3,1726.3],
                    color:'#FFCC33',
                    itemStyle:{
                      normal:{
                        label:{
                            show:true,
                            position:'right',
                            textStyle:{
                              color:'black',
                              fonrSize:16
                            }
                        }
                      }
                        
                    }
                }
            ]
        };
        myChart.setOption(option);
    }
  },

  mounted() {
    this.drawChart();
  },

  data() {
    return {
      tableData: [
        {
          category_months: "所有者权益(万亿)",
          January: 18.8,
          February: 17.2,
          March: 22.3,
          April: 20.3,
          May: 12.7,
          June: 18.6,
          July: 19.3,
          August: 12.6,
          September: 25.9,
          October: 24.8,
          November: 17.8,
          December: 6.9
        },
        {
          category_months: "负债合计(万亿)",
          January: 18.8,
          February: 17.2,
          March: 22.3,
          April: 20.3,
          May: 12.7,
          June: 18.6,
          July: 19.3,
          August: 12.6,
          September: 25.9,
          October: 24.8,
          November: 17.8,
          December: 6.9
        },
        {
          category_months: "资产合计(万亿)",
          January: 18.8,
          February: 17.2,
          March: 22.3,
          April: 20.3,
          May: 12.7,
          June: 18.6,
          July: 19.3,
          August: 12.6,
          September: 25.9,
          October: 24.8,
          November: 17.8,
          December: 6.9
        }
      ]
    };
  }
};
</script>

<style>
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
/* // 添加一行注释 */
.clearfix:after {
  clear: both;
}

.box-card {
  float: left;
  margin-left: 50px;
  width: 480px;
  height: 180px;
}

.month_table {
  margin-left: 150px;
}

.main {
  margin-top: 50px;
}
</style>
